import * as React from 'react';
import {observer} from 'mobx-react';
import {Modal, Row, Col, Form, Input, Select} from 'antd';
import {TagBaseFormStore} from '../TagStore';
import {SelectItem} from '../../../../component/select/Select';
import {InputItem} from '../../../../component/input/Input';

const FormItem = Form.Item;
const Option = Select.Option;

@observer
export class TagBaseFormModal extends React.Component<{ store: TagBaseFormStore, title: string, onOk }, any> {

    render() {
        return (
            <Modal
                maskClosable={false}
                title={this.props.title}
                onOk={this.ok(this)}
                onCancel={() => {
                    this.props.store.hide()
                }}
                width="650"
                visible={this.props.store.visible}>
                <TagBaseForm store={this.props.store}/>
            </Modal>
        )
    }

    ok(me) {
        return function () {
            me.props.onOk(me);
        }
    }

    cancel(me) {
        return function () {
            me.props.onCancel(me);
        }
    }
}

@observer
export class TagBaseForm extends React.Component<{ store: TagBaseFormStore }, any> {
    onChangeAppId = (value) => {
        let store: TagBaseFormStore = this.props.store;
        store.valid('appId', value, !store.fields.appId.required);
    }

    render() {
        const store = this.props.store;

        const colStyle = {
            labelCol: {span: 4},
            wrapperCol: {span: 20}
        };

        return (
            <div>
                <Row type="flex">
                    <Col span={24}>
                        <SelectItem
                            mykey="appId"
                            title="应用名称"
                            store={store}
                            onChange={this.onChangeAppId}
                            labelCol={colStyle.labelCol}
                            wrapperCol={colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem
                            store={store}
                            myKey="code"
                            title="标签编码:"
                            labelCol={colStyle.labelCol}
                            wrapperCol={colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem
                            store={store}
                            myKey="name"
                            title="标签名称:"
                            labelCol={colStyle.labelCol}
                            wrapperCol={colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem
                            store={store}
                            myKey="description"
                            title="标签描述:"
                            labelCol={colStyle.labelCol}
                            wrapperCol={colStyle.wrapperCol}/>
                    </Col>
                </Row>
            </div>
        )
    }
}